<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<!-- 绑定事件
			bind绑定事件
				为被选元素添加一个或者多个事件处理程序，并规定事件发生时运行的函数
				语法：
				$(selector).bind("事件类型",function(){})
				$(selector).事件名(function(){})
			绑定多个事件
		 -->
		<div id="test">点击查看名言</div>
		<input id="btntest" type="button" value="点击就不可用了"/>	
		<button type="button" id="btn1">按钮1</button>
		<button type="button" id="btn2">按钮2</button>
		<button type="button" id="btn3">按钮3</button>
		<button type="button" id="btn4">按钮4</button>
		
	</body>
	<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		
		$("#test").bind("click",function(){
			console.log("世界真好");
		});
		
		// 原生js事件绑定
		// document.getElementById("test").onclick=function(){
		// 	console.log("test");
		// }
		
		$("#btntest").click(function(){
			console.log(this);
			$(this).prop("disabled",true);
		});
		
		// 绑定多个事件
		//多个事件绑定一个函数
		$("#btn1").bind("click mouseout",function(){
			console.log("按钮1...");
		});
		
		$("#btn2").bind("click",function(){
			console.log("按钮2被点击了");
		}).bind("mouseout",function(){
			console.log("按钮2移开了");
		});
		
		$("#btn3").bind({
			"click":function(){
				console.log("按钮3点击了");
			},
			"mouseout":function(){
				console.log("按钮3移开了");
			}
		});
		
		//直接绑定
		$("#btn4").click(function(){
			console.log("按钮4点击了");
		}).mouseout(function(){
			console.log("按钮4移开了");
		});
	</script>
</html>
